@use '../../../theme/mixins' as mixins;

// create a sexy looking white bg card with a slight shadow
.sales-card {
  display: grid;
  grid-template-areas:
    "title"
    "description"
    "features"
    "button";
  grid-template-rows: 1fr 1fr 219px 1fr;
  border-radius: 1rem;
  padding: 2rem;
  width: 300px;
  border: 1px solid rgb(0 0 0 / 10%);
  text-align: center;
  align-items: start;
  background-color: #fff;

  @include mixins.mobile-screens {
    grid-template-rows: auto;
  }

  h3 {
    grid-area: title;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    margin-bottom: 0.5rem;
  }

  .sales-card-description {
    grid-area: description;
    color: rgb(13 13 13 / 40%);
    margin-bottom: 1rem;
  }

  .sales-card-features {
    grid-area: features;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;

    li {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }
  }

  button.outlined {
    background: transparent;
    color: #6750a4;
    box-shadow: inset 0 0 0 2px #6750a4;
  }

  button.black {
    background: linear-gradient(to right, #000 50%, #333 100%);
    color: #fff;
  }

  .btn-area {
    grid-area: button;
  }

  .btn {
    background: linear-gradient(to right, #6750a4 50%, #8c6fb7 100%);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    cursor: pointer;
    margin-top: 1rem;

    &:hover {
      transform: translateY(-2px);
    }
  }
}
